<template>
  <div class="audit">
    <Header :title="title"></Header>
    <div class="header_one">
      <div class="inps">
        <div class="inp">
          <div class="inp_in">
            <van-icon name="search" class="search" />
            <input
              type="text"
              class="input"
              v-model="state.input"
              placeholder="请输入审批发起人姓名"
            />
          </div>
        </div>
        <div class="but">筛选</div>
      </div>
      <div class="audio_x">
        <span
          @click="auditDianFun(v)"
          :class="num === v.type ? 'audit_xxx' : 'audit_xx'"
          v-for="(v, i) in state.dataList"
          :key="i"
          >{{ v.name }}<span class="ups"></span
        ></span>
      </div>
    </div>

    <div class="section_one">
      <div
        class="section_one_in"
        :style="{ borderLeft: `5px solid ${colors}` }"
        v-for="(v, i) in state.dataLists"
        :key="i"
      >
        <p class="audit_p_one">
          <span>{{ v.audit_name }}</span
          ><span>{{ v.audit_time }}</span>
        </p>
        <p class="audit_p_two">{{ v.audit_times }}</p>
        <dl class="audit_dl_one">
          <dt>
            <p>发起人：{{ v.audit_popel }}</p>
            <p>请假原因：{{ v.audit_title }}</p>
          </dt>
          <dd>{{ v.status ? "已读" : "未读" }}<van-icon name="arrow" /></dd>
        </dl>

        <p class="audit_p_three">
          <span>{{ v.date }}</span>
          <span v-if="!v.status">
            <van-button type="primary" size="mini" @click="sureFun(v)"
              >同意</van-button
            >
            <van-button
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              size="mini"
              @click="refuseFun(v)"
              >拒绝</van-button
            >
          </span>
        </p>
      </div>

    </div>
  </div>
</template>

<script>

import { Dialog, Toast } from "vant";
import { auditList } from "../../api/audit/audit";
import Header from "../../components/backHeader.vue";
import { ref, reactive, watch, onMounted,getCurrentInstance } from "vue";

export default {
  components: {
    Header,
  },
  mounted(){
    
  },
  methods:{
    
  },
  setup() {
    // const { proxy, ctx } = getCurrentInstance()
    // let { storage } = proxy
    let title = ref("审批列表");
    let state = reactive({
      dataList: [],
      dataLists: [],
      input: "",
    });
    let num = ref(0);
    let colors = ref("#f38a1b");
    let timeout = ref("");

    //监听input框
    watch(
      () => state.input,
      (inp, preinp) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          handleChangeName(inp);
        }, 500);
      }
    );
    const handleChangeName = (value) => {
      if (value === "") {
        return false;
      }
      console.log(value);
    };

    //数据获取
    // auditList().then(
    //   (res) => {
    //     console.log(res.data);
    //     if (res.data.status === 200) {
    //       res.data.data.forEach((v, i) => {
    //         state.dataList.push(v);
    //       });
    //       state.dataList[0].child.forEach((v) => {
    //         state.dataLists.push(v);
    //       });
    //     }
    //   },
    //   (err) => {
    //     console.log(err);
    //   }
    // );

    //横向滚动切换
    const auditDianFun = (val) => {
      num.value = val.type;
      colors.value =
        val.type === 0
          ? "#f38a1b"
          : val.type === 1
          ? "#f38a1b"
          : val.type === 2
          ? "#00BB7F"
          : val.type == 3
          ? "#FF5B57"
          : "#999";

      state.dataLists = [];
      state.dataList.forEach((v) => {
        if (v.id === val.id) {
          state.dataList[val.id].child.forEach((v) => {
            state.dataLists.push(v);
          });
        }
      });
    };

    //点击假条同意
    const sureFun = (val) => {
      Dialog.confirm({
        title: val.audit_name,
        message: `是否同意${val.audit_popel}的${val.audit_name}`,
      })
        .then(() => {
          Toast.success("已同意");
        })
        .catch(() => {
          Toast.fail("已取消");
        });
    };

    //点击假条拒绝
    const refuseFun = (val) => {
      Dialog.confirm({
        title: val.audit_name,
        message: `是否拒绝${val.audit_popel}的${val.audit_name}`,
      })
        .then(() => {
          Toast.success("已拒绝");
        })
        .catch(() => {
          Toast.fail("已取消");
        });
    };

    onMounted(() => {
      // storage.setItem('name','吴昊');
    })

    return {
      title,
      state,
      num,
      auditDianFun,
      sureFun,
      refuseFun,
      colors,
    };
  },
};
</script>

<style lang="scss">
.audit {
  font-size: 14px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header_one {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  div {
    width: 100%;
    height: 50px;
  }
}
.header_one > .inps {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header_one > .inps > .inp {
  width: 318px;
  height: 100%;
  padding: 0 0 0 26px;
  box-sizing: border-box;
}
.header_one > .inps > .but {
  width: 57px;
  height: 100%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.header_one > .inps > .inp > .inp_in {
  width: 292px;
  height: 41px;
  border: 1px solid #bbbbbb;
  border-radius: 60px;
  box-shadow: 2px 2px 8px #ccc;
  position: relative;
  .search {
    position: absolute;
    top: 10px;
    left: 19px;
    font-size: 20px;
    color: #ccc;
  }
  .input {
    height: 80%;
    border: none;
    outline: none;
    position: absolute;
    top: 3px;
    left: 50px;
  }
}

.audio_x {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.audit_xx {
  display: inline-block;
  width: 42px;
  height: 20px;
}
.audit_xxx {
  width: 54px;
  height: 23px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  .ups {
    position: absolute;
    bottom: 2px;
    left: 12px;
    display: inline-block;
    width: 27px;
    height: 4px;
    background: orange;
    box-shadow: 2px 2px 4px orangered;
  }
}

.section_one {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .section_one_in {
    margin-top: 8px;
    width: 360px;
    height: 172px;
    border: 1px solid rgba(255, 0, 0, 0);
    border-radius: 4px;
    box-shadow: -2px 0 8px #f1f1f1, 0 -2px 4px #ccc, 0 2px 4px #ccc,
      2px 0 4px #ccc, 2px 0 0 #ccc;
  }
}

.audit_p_one {
  width: 100%;
  height: 28px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 14px;
  box-sizing: border-box;
}
.audit_p_one > span:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
}
.audit_p_two {
  width: 100%;
  white-space: nowrap;
  padding: 0 46px 0 14px;
  box-sizing: border-box;
}
.audit_dl_one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 14px;
  box-sizing: border-box;
  dd {
    color: #575757;
  }
}

.section_one > .section_one_in > .audit_p_three {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 14px;
  box-sizing: border-box;
  margin-top: -10px;
}
</style>